define(function(require, exports, module) {

  // var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('lodash');
  // var jsonview = require('jsonview');
  var tmpl = require('text!../tmpl.html');
    
  var THREE = require('three');
  window.THREE = THREE;

  var littleCanvas = require('hy5b/frontend/canvas/littleCanvas')

  function main() {
    var $app = $('<div id="app">');
    $('#main').html($app);

    $app.append(tmpl);
      
    var $el = $('<div class="w800 h600">').css('background-color', '#040b27');
    
    $app.append($el)

    require([
        'js/graph/baseThreeApp'
    ], function(BaseThreeApp) {

        function createAlaphaTextureMore() {
          var lc = new littleCanvas()

          lc.draw(ctx => {
            var gradient = ctx.createLinearGradient(lc.size, lc.size, 0, 0);
            gradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
            gradient.addColorStop(0.2, 'rgba(255, 255, 255, 1)');
            gradient.addColorStop(0.6, 'rgba(0, 0, 0, 1)');
            gradient.addColorStop(1, 'rgba(0, 0, 0, 1)');
            ctx.fillStyle = gradient
            ctx.rect(0,0,lc.size,lc.size)
            ctx.fill()
          })
          const texture = new THREE.CanvasTexture(lc.pop())
          return texture
        }

        function createAlaphaTextureLess() {
          var lc = new littleCanvas()

          lc.draw(ctx => {
            var gradient = ctx.createLinearGradient(lc.size, lc.size, 0, 0);
            gradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
            gradient.addColorStop(0.2, 'rgba(255, 255, 255, 1)');
            gradient.addColorStop(0.8, 'rgba(0, 0, 0, 1)');
            gradient.addColorStop(1, 'rgba(0, 0, 0, 1)');
            ctx.fillStyle = gradient
            ctx.rect(0,0,lc.size,lc.size)
            ctx.fill()
          })
          const texture = new THREE.CanvasTexture(lc.pop())
          return texture
        }

        function createAlaphaTextureForTorus() {
          var lc = new littleCanvas()

          lc.draw(ctx => {
            var gradient = ctx.createLinearGradient(0,0, lc.size, 0);
            gradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
            gradient.addColorStop(0.1, 'rgba(255, 255, 255, 1)');
            gradient.addColorStop(0.15, 'rgba(0, 0, 0, 1)');
            gradient.addColorStop(0.6, 'rgba(0, 0, 0, 1)');
            gradient.addColorStop(0.65, 'rgba(255, 255, 255, 1)');
            gradient.addColorStop(1, 'rgba(255, 255, 255, 1)');
            ctx.fillStyle = gradient
            ctx.rect(0,0,lc.size,lc.size)
            ctx.fill()
          })
          const texture = new THREE.CanvasTexture(lc.pop())
          $app.append(lc.pop())
          return texture
        }

        class App extends BaseThreeApp {
          constructor(el) {
              super(el, {
                  callBefore: function() {
//                         this.light = 1
                      this.drLight = 1
                  }
              })

              var light = new THREE.PointLight( 0x83c1f0, 2, 500 );
              light.position.set( 250, 120, 250 );

              this.scene.add(light)


              this.drawMain()
              this.drawMainBorder()
              this.drawBottom()
              this.drawBottomBorder()
              this.drawTop()
              this.drawTopBorder()
              this.drawMiddleBorder()


              this.step()
          }

          drawMain() {
              if (!this.mainMesh) {
                  var points = [];
                  for ( var i = 0; i < 2; i ++ ) {
                      points.push( new THREE.Vector2( 184, i * 55 ) );
                  }
                  var geometry = new THREE.LatheGeometry( points, 50 );
                  var material = new THREE.MeshPhongMaterial( { color: 0x254894 } );
                  material.transparent = true
                  material.opacity = 0.8
                  material.side = THREE.DoubleSide
                  var lathe = new THREE.Mesh( geometry, material );
                  this.scene.add( lathe );
                  this.mainMesh = lathe;
              }
          }

          drawMainBorder() {
              if (!this.mainBorderMesh) {
                  var geometry = new THREE.RingGeometry( 282, 284, 50 );
                  var material = new THREE.MeshBasicMaterial( { color: 0x3d73ce } );
                  material.transparent = true
//                     material.opacity = 0.6
                  material.alphaMap = createAlaphaTextureMore()
                  var mesh = new THREE.Mesh( geometry, material );
                  mesh.position.y = 85
                  mesh.rotation.x = -Math.PI / 2
                  this.scene.add( mesh );
                  this.mainBorderMesh = mesh
              }
          }

          drawBottom() {
              if (!this.bottomMesh) {
                  var geometry = new THREE.CircleGeometry( 215, 50 );
                  var material = new THREE.MeshPhongMaterial( { color: 0x1e2f63 } );
                  material.transparent = true
                  material.opacity = 0.6
                  var circle = new THREE.Mesh( geometry, material );
                  circle.rotation.x = -Math.PI / 2
                  this.scene.add( circle );
                  this.bottomMesh = circle
              }

          }

          drawBottomBorder() {
              if (!this.bottomBorderMesh) {
                  var geometry = new THREE.RingGeometry( 238, 240, 50 );
                  var material = new THREE.MeshBasicMaterial( { color: 0x3d73ce } );
                  material.transparent = true
                  material.opacity = 0.6
                  material.alphaMap = createAlaphaTextureLess()
                  var mesh = new THREE.Mesh( geometry, material );
                  mesh.rotation.x = -Math.PI / 2
                  this.scene.add( mesh );
                  this.bottomBorderMesh = mesh
              }
          }

          drawTop() {
              if (!this.topMesh) {
                  var geometry = new THREE.CircleGeometry( 225, 50 );
                  var material = new THREE.MeshBasicMaterial( { color: 0x1e2f63 } );
                  material.transparent = true
                  material.opacity = 0.6
//                     material.alphaMap = createAlaphaTextureMore()
                  var circle = new THREE.Mesh( geometry, material );
                  circle.position.y = 158
                  circle.rotation.x = -Math.PI / 2
                  this.scene.add( circle );
                  this.topMesh = circle
              }
          }

          drawTopBorder() {
              if (!this.topBorderMesh) {
                  var geometry = new THREE.RingGeometry( 248, 250, 50 );
                  var material = new THREE.MeshBasicMaterial( { color: 0x3d73ce } );
                  material.transparent = true
//                     material.opacity = 0.6
                  material.alphaMap = createAlaphaTextureMore()
                  var mesh = new THREE.Mesh( geometry, material );
                  mesh.position.y = 158
                  mesh.rotation.x = -Math.PI / 2
                  this.scene.add( mesh );
                  this.topBorderMesh = mesh
              }
          }

          drawMiddleBorder() {
              if (!this.middleBorder) {
                  var geometry = new THREE.TorusGeometry( 225, 3, 16, 100 );
                  var material = new THREE.MeshPhongMaterial( { color: 0x456ab1 } );
                  material.transparent = true
                  material.opacity = 0.8
                  material.alphaMap = createAlaphaTextureForTorus()
                  var torus = new THREE.Mesh( geometry, material );
                  torus.position.y = 110
                  torus.rotation.x = -Math.PI / 2
                  this.scene.add( torus );
              }
          }




        }

        new App($el[0])

    })
      
      
  }
    

  return main;
})
